import Echart from '../report-public/flow-e-chart/index';
import ReportEchartAlert from '../report-public/report-echart-alert/index';
import trim from 'lodash/trim';
import {Icon} from 'antd';
import {WeaReportCard,WeaLocaleProvider} from 'ecCom';
import * as ReportUtil from '../../../util/reportUtil';
import {echartTipNewLine} from "../../../util/reportUtil";
const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component{
	constructor(props){
		super(props);
	}

	render(){
		const {eChartDatas = {},module,loading} =  this.props;
		const echartoption = this.initEchartOption();
        const {title = '',datas = []}  = eChartDatas;
		const marginClass =  module === 1 ? {'marginRight':'8px'} : {"marginLeft":"8px"};
		const analyseEchartClass = datas.length > 0 ? '':'analyse-e-chart';
		return (
			<div className={'analyse-e-chart'} style={marginClass}>
				{datas.length > 0 ?
                    <div>
                        <div className="e-chart-head">
                            <span className="e-chart-head-name">{`${title}(TOP5)`}</span>
                            <span className="e-chart-head-more">
								<span onClick={this.showMore.bind(this)} style={{'marginRight': '10px'}}>{getLabel(17499,'更多')}</span>
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@9rlpmt`} type="download" title={getLabel(385746,'另存为图片')} onClick={this.downloadImg.bind(this)}/>
							</span>
                        </div>
                        <div className="e-chart-main">
                            <Echart ecId={`${this && this.props && this.props.ecId || ''}_Echart@7kka5k`} ref="echart" echartoption={echartoption} clickEvent={this.doClickEvent.bind(this)}/>
                        </div>
                    </div>
					:
					<ReportEchartAlert ecId={`${this && this.props && this.props.ecId || ''}_ReportEchartAlert@08fy97`} loading={loading} />
				}
			</div>
		)
	}

    showMore(){
		const {module,showModal} = this.props;
        showModal && showModal(1,{module});
	}

    doClickEvent(flag,data= {}){
        const {showModal,module} = this.props;
        showModal && showModal(2,{'module':module,...data});
    }

	initEchartOption(){
		const {eChartDatas} = this.props;
		const {datas=[],title=''} =  eChartDatas;
		const _datas = [];
		const _yAxisData = [];
		datas.map(o=>{
			_datas.push(o);
			_yAxisData.push(o.title);
		});
		const echartoption = {
			tooltip:{
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
      				return ReportUtil.getEchartTipInfo(params);
                },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                    shadowStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                }
			},
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '10%',
		        containLabel: true
		    },
	        xAxis:  {
		        type: 'value',
        		splitLine:{
		            show:false
		        }
		    },
		    yAxis: {
		        type: 'category',
		        data: _yAxisData,
		        axisLabel:{
		        	formatter:function(value){
		        		let __value = trim(value);
		        		return ReportUtil.InterceptLabel(__value,12);
		        	}
		        }
		    },
		    color:['#F67C4C'],
	        series: [
		        {
		            name: "",
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: false,
		                    position: 'insideRight'
		                }
		            },
		            barWidth : 40,
		            data: _datas
		        },
		    ]
		};
		return echartoption;
	}

	downloadImg(){
		const echartid  = this.refs.echart.getEchartId();
		const cvs = jQuery("div[_echarts_instance_='"+echartid+"'] canvas")[0];
		ReportUtil.downloadCvs2Img(cvs);
	}
}
